<!DOCTYPE html>
<html>
  <head>
    <title>MyBlog</title>
    <link rel="stylesheet" type="text/css" href="../static/css/index.css">
    <script type="text/javascript" src="../static/js/common/jquery-3.2.1.js" ></script>
    <script type="text/javascript" src="../static/js/tagcanvas.js"></script>
  </head>
  <body>
  <div class="show_box">
    <div class="header">
      
    </div>
    <form>
      <div class="blog_list">
        <div class="main">
          {% for article in blog_list %}
              <div class="infor">
                <div class="mydate">
                  <div class="month">
                    {{ article.timestamp|date:"m" }}
                  </div>
                  <div class="day">
                    {{ article.timestamp|date:"d" }}
                  </div>
                </div> 
                <h2><a class="title" href={% url 'content' article.id %} >{{ article.title }}</a></h2>
                <div class="content">
                  {% autoescape off %}
                    {{ article.article }}
                  {% endautoescape %}
                  
                </div>
                <div class="_tag">
                  <span class="tags"></span>
                  <span><a href={% url 'search' article.art_tag %} >{{ article.art_tag }}</a></span>
                </div>
              </div>
          {% endfor %}
        </div>
        <div id="tags" style="display:none;">
            {% for article in tag_list %}
              <a class="art_tag" href={% url 'search' article.art_tag %}>{{ article.art_tag }}</a>
              <a class="art_tag" href={% url 'search' article.art_tag %}>{{ article.art_tag }}</a>
              <a class="art_tag" href={% url 'search' article.art_tag %}>{{ article.art_tag }}</a>
              <a class="art_tag" href={% url 'search' article.art_tag %}>{{ article.art_tag }}</a>
              <a class="art_tag" href={% url 'search' article.art_tag %}>{{ article.art_tag }}</a>
            {% endfor %}
        </div>
        <div class="tag">
          <div class="tag_header">
              <span>Tag</span>
          </div>
          <div class="tagCan">
            <canvas width="260px" height="260px" id="myCanvas"></canvas>
          </div>
        </div>
      </div>
    </div>
    <script>
      window.onload = function() {  
            try {  
                TagCanvas.Start('myCanvas','tags',{  
                textColour: '#FF0000',  
                outlineMethod:'none',  
                reverse: true,  
                depth: 0.8,  
                maxSpeed: 0.04  
                });  
            } catch(e) {  
                document.getElementById('myCloudTag').style.display = 'none';  
            }  
        };
    </script>
    </form>
  </body>
</html>